import React from 'react';
// import { Table,
// 	TableBody,
// 	TableFooter,
// 	TableHeader,
// 	TableHeaderColumn,
// 	TableRow,
// 	TableRowColumn } from 'material-ui/lib/table';
import isEqual from 'lodash/lang/isEqual';

const textAlignStyle = {
	textAlign: 'center'
};

const tableStyle = {
	tableLayout:'fixed'
};

export default class TableChart extends React.Component {
	constructor(props) {
		super(props);
	}

	getHeaderColumns() {
		return [];
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !isEqual(nextProps.dataSource, this.props.dataSource);
	}

	render() {
		let headerColumns = this.getHeaderColumns(this.props);
		let headerColumnTags = headerColumns.map((item, index) =>
			<th key={index} style={{...textAlignStyle}}>{item.label}</th>);
		let columnStyleTags = headerColumns.map((item, index) => 
			<col key={index} width={item.width || 'auto'} />);

		let { dataSource, height } = this.props;
		let rowItems = dataSource.map((row, rowIndex) => {

			let columns = headerColumns.map((column, columnIndex) => {
				let index = (column.dataIndex != null && column.dataIndex != undefined) ? column.dataIndex : -1;
				let key = column.dataKey;

				let data = row[index] || '';
				return (
					<td style={{...textAlignStyle}} key={columnIndex}>
						{data[key] ? data[key] : data}
					</td>
				);
			});

			return (
				<tr key={rowIndex}>
					{columns}
				</tr>
			);
		})

		return (
			<div>
				<table style={tableStyle}>
					<colgroup>
						{columnStyleTags}
					</colgroup>
					<thead>
						<tr>
							{headerColumnTags}
						</tr>
					</thead>
				</table>
				<table style={tableStyle}>
					<colgroup>
						{columnStyleTags}
					</colgroup>
					<tbody>
					    {rowItems}
					</tbody>
				</table>
			</div>
		);
	}
}